/**
 * Created by Flyforwards on 2017/8/2.
 */
import React, { Component } from "react"
import  { Link } from 'react-router'
import fetchData from '../../util/fetch'
import { Tabs, Carousel, Row, Col, Modal, Input, Button, Form, message, DatePicker, } from 'antd'
const TabPane = Tabs.TabPane;
import { getUrl } from '../../util/function'
import moment from 'moment';
const FormItem = Form.Item;
import ACTIVITYIMG from '../../img/activity_20170802001.png';

class ActivityConsule extends Component {
    constructor(props) {
        super(props)
        this.state = {
            homelist: [],
            banner: null,
            newsData: null,//新闻动态
            newsList: null,//新闻列表
            activityRecruit: null,//活动招募
            activityRecruitList: null,//活动招募列表
            activityRecruitPageIndex: 0,
            momAndBabyKnowledge: null,//母婴知识
            momAndBabyKnowledgeList: null,//母婴知识列表
            momAndBabyKnowledgePageIndex: 0,
            momCourse: null,//妈妈课程,
            momCourseData: null,//妈妈课程列表
            defKey: '1',
            visible: false,
            imgNewsUrl:'',
            imgRecruitUrl:'',
            imgBabyUrl:''
        }
    }

    callback(key) {
        console.log(key);
    }

    getData(url, opts) { // 请求后台数据
        fetchData(url, opts, function (res) {
            let data = eval(res.data)
            switch (opts.str) {
                case '4-1':
                    this.setState({
                        newsData: data
                    });
                    break;
                case '4-1-1':
                    this.setState({
                        newsList: data,
                        imgNewsUrl:data[0].img1Url ? data[0].img1Url : data[0].img2Url,
                    });
                    break;
                case '4-2':
                    this.setState({
                        activityRecruit: data
                    });
                    break;
                case '4-2-1':
                    this.setState({
                        activityRecruitList: data,
                        imgRecruitUrl:data[0].img1Url ? data[0].img1Url : data[0].img2Url,
                    });
                    break;
                case '4-3':
                    this.setState({
                        momAndBabyKnowledge: data
                    });
                    break;
                case '4-3-1':
                    this.momAndBabyKnowledgePageTotal = Math.ceil(data ? data.length / 4 : 0);
                    this.setState({
                        momAndBabyKnowledgeList: data,
                        imgBabyUrl:data[0].img1Url ? data[0].img1Url : data[0].img2Url
                    });
                    break;
                case '4-4':
                    this.setState({
                        momCourse: data
                    });
                    break;
            }
        }.bind(this))
    }

    getBannerData(url, opts) {// 请求banner图
        fetchData(url, opts, function (res) {
            let data = eval(res.data);
            this.setState({
                banner: data
            });
        }.bind(this));
    }

    getMomCourseData(url, opts) {
        fetchData(url, opts, function (res) {
            let data = eval(res.data);
            this.setState({
                momCourseData: data
            });
        }.bind(this));
    }

    componentWillMount() {
        // this.setState({
        // 	defKey: this.props.params.defKey
        // })
        //banner类型 1首页、2hibaby服务、3美研中心、4活动咨询、5新妈分享、6关于Hibaby
        this.getBannerData('/crm/api/v1/web/banner/findOneByType', { "dataId": 4 });
        // 4-1	新闻动态
        this.getData('/crm/api/v1/web/news/findOneByType', { "str": "4-1" });
        // 4-1-1	新闻动态列表
        this.getData('/crm/api/v1/web/news/findListByType', { "str": "4-1-1" });
        // 4-2	活动招募
        this.getData('/crm/api/v1/web/news/findOneByType', { "str": "4-2" });
        // 4-2-1	活动招募列表
        this.getData('/crm/api/v1/web/news/findListByType', { "str": "4-2-1" });
        // 4-3	母婴知识
        this.getData('/crm/api/v1/web/news/findOneByType', { "str": "4-3" });
        // 4-3-1	母婴知识列表
        this.getData('/crm/api/v1/web/news/findListByType', { "str": "4-3-1" });
        // 4-4	妈妈课程
        this.getData('/crm/api/v1/web/news/findOneByType', { "str": "4-4" });
        //获取妈妈课程列表
        this.getMomCourseData('/crm/api/v1/web/webCourse/list', null);
    }

    shouldComponentUpdate(nextProps, nextState) {

        if (this.props.params.anchor != nextProps.params.anchor) {
            let  anchor;
            if (nextProps.params.anchor === 'group1' || nextProps.params.anchor === 'group2') {
                anchor = '.group';
            } else {
                anchor = '.' + nextProps.params.anchor;
            }

            // setTimeout(function () {
            $("body").stop();
            if ($(anchor).offset().top != $('body').scrollTop) {
                    $("body").animate({ scrollTop: $(anchor).offset().top }, 500);
            }
            // }, 400);
        }
        return true;
    }

    componentDidMount() {
        if (this.props.params.anchor) {
            const anchor = '.' + this.props.params.anchor;
            setTimeout(function () {
                $("body").animate({ scrollTop: $(anchor).offset().top }, 500)
            }, 350)
        }
    }
    onMouse(data,id,type) {
        if(type == '4-1-1'){
            this.setState({
                imgNewsUrl:data.img1Url ? data.img1Url : data.img2Url
            })
        }
        if(type == '4-2-1'){
            this.setState({
                imgRecruitUrl:data.img1Url ? data.img1Url : data.img2Url
            })
        }
        if(type == '4-3-1') {
            this.setState({
                imgBabyUrl:data.img1Url ? data.img1Url : data.img2Url
            })
        }
    }
    //新闻列表
    initNewsList() {
        let { newsList } = this.state;
        let newsHtml = [];
        if (!newsList || newsList.length == 0) {
            return null;
        } else {
            for (let i = 0; i < newsList.length; i++) {
                if (i < 8) {

                    newsHtml.push(
                        <li onMouseOver={this.onMouse.bind(this,newsList[i],newsList[i].id,newsList[i].type)}><span></span>  <Link className="newsHover" to={`/detail?id=${newsList[i].id}`} key={i}>{newsList[i].title}</Link></li>
                    )
                } else {
                    break;
                }
            }
            return (
            <ul className="news_list">
                {newsHtml}
            </ul>
            )
        }
    }
    //活动招募
    initRecruit() {
        let { activityRecruitList } = this.state;
        let recruitHtml = [];
        if (!activityRecruitList || activityRecruitList.length == 0) {
            return null;
        } else {
            for (let i = 0; i < activityRecruitList.length; i++) {
                if (i < 8) {
                    recruitHtml.push(
                        <li onMouseOver={this.onMouse.bind(this,activityRecruitList[i],activityRecruitList[i].id,activityRecruitList[i].type)}><span></span>  <Link className="newsHover" to={`/detail?id=${activityRecruitList[i].id}`} key={i}>{activityRecruitList[i].title}</Link></li>
                    )
                } else {
                    break;
                }
            }
            return (
                <ul className="news_list">
                    {recruitHtml}
                </ul>
            )
        }
    }
    //母婴知识
    initMomAndBaby() {
        let { momAndBabyKnowledgeList } = this.state;
        let momAndBabyHtml = [];
        if (!momAndBabyKnowledgeList || momAndBabyKnowledgeList.length == 0) {
            return null;
        } else {
            for (let i = 0; i < momAndBabyKnowledgeList.length; i++) {
                if (i < 8) {
                    momAndBabyHtml.push(
                        <li onMouseOver={this.onMouse.bind(this,momAndBabyKnowledgeList[i],momAndBabyKnowledgeList[i].id,momAndBabyKnowledgeList[i].type)}><span></span>  <Link className="newsHover" to={`/detail?id=${momAndBabyKnowledgeList[i].id}`} key={i}>{momAndBabyKnowledgeList[i].title}</Link></li>
                    )
                } else {
                    break;
                }
            }
            return (
                <ul className="news_list">
                    {momAndBabyHtml}
                </ul>
            )
        }
    }

    render() {
        const defKey = this.props.params.defKey;
        const layout = {
            colSpan: 5
        }
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 18 }
        };
        return (
            <div className="activityConsule">
                <div className="activity-banner"><img src={this.state.banner ? this.state.banner.imgUrl : ''}/></div>
                <div className="activity-content group">
                    <Row className="activity_top">
                        <Col className="activity_news">
                            <h3>{this.state.newsData ? this.state.newsData.title : '新闻动态'}</h3>
                            <div className="news_img">
                                <img src={this.state.imgNewsUrl} alt=""/>
                            </div>
                            {this.initNewsList()}
                            {/*<ul className="news_list">*/}
                                {/*{this.initNewsList()}*/}
                                {/*<li onMouseOver={this.onMouse.bind(this)}><span></span><Link to={`/activityDetail?id=${val.id}&type=1`}>新闻列表结合 </Link></li>*/}
                                {/*<li><span></span>新闻列表结合</li>*/}
                                {/*<li><span></span>新闻列表结合</li>*/}
                                {/*<li><span></span>新闻列表结合</li>*/}
                            {/*</ul>*/}
                            <Link to="/activityDetail"><span className="more">MORE+</span></Link>
                        </Col>
                        <Col className="activity_news activity_recruit">
                            <h3>{this.state.activityRecruit ? this.state.activityRecruit.title : '活动招募'}</h3>
                            <div className="news_img">
                                <img src={this.state.imgRecruitUrl} alt=""/>
                            </div>
                            {this.initRecruit()}
                            {/*<ul className="news_list">*/}
                                {/*<li><span></span>新闻列表结合</li>*/}
                                {/*<li><span></span>新闻列表结合</li>*/}
                                {/*<li><span></span>新闻列表结合</li>*/}
                                {/*<li><span></span>新闻列表结合</li>*/}
                            {/*</ul>*/}
                            <Link to="/activityRecruit" ><span className="more">MORE+</span></Link>
                        </Col>
                        <Col className="activity_news activity_know">
                            <h3>{this.state.momAndBabyKnowledge ? this.state.momAndBabyKnowledge.title : '母婴知识'}</h3>
                            <div className="news_img">
                                <img src={this.state.imgBabyUrl} alt=""/>
                            </div>
                            {this.initMomAndBaby()}
                            {/*<ul className="news_list">*/}
                                {/*<li><span></span>新闻列表结合</li>*/}
                                {/*<li><span></span>新闻列表结合</li>*/}
                                {/*<li><span></span>新闻列表结合</li>*/}
                                {/*<li><span></span>新闻列表结合</li>*/}
                            {/*</ul>*/}
                            <Link to="/momAndBabyKnowledge"><span className="more">MORE+</span></Link>
                        </Col>
                    </Row>
                    <div className="activity_bottom motherCourse">
                        <h3>{this.state.momCourse ? this.state.momCourse.title : '妈妈课程'}</h3>
                        <Row className="activity_motherCourse">
                            <Col span={24} className="course_img">
                                <img src={ACTIVITYIMG} alt=""/>
                            </Col>

                        </Row>

                    </div>




                </div>
            </div>
        )
    }
}

export default  Form.create()(ActivityConsule) ;
